<template>
  <div :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme

export default {
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '430px'
    }
  },
  data() {
    return {
      chart: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    init() {
      this.chart = echarts.init(this.$el, 'macarons')
      var option = {
        title: {
          text: 'Pie Charts',
          left: 'center'
        },

        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical', // 垂直，  默认水平
          x: 'left', // 可设定图例在左、右、居中
          y: 'center', // 可设定图例在上、下、居中
          type: 'plain', // plain 普通样式, scroll 可滚动翻页，当图例数量较多时使用
          icon: 'circle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
          itemWidth: 20, // itemWidth和itemHeight来修改icon的大小。
          itemHeight: 20,
          textStyle: {
            // color: 'red',
            fontSize: 16
          },
          data: ['视频广告', '联盟广告', '邮件营销', '直接访问', '搜索引擎']

        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            selectedMode: 'single',
            // roseType: 'angle',
            data: [
              { value: 235, name: '视频广告' },
              { value: 274, name: '联盟广告' },
              { value: 310, name: '邮件营销' },
              { value: 335, name: '直接访问' },
              { value: 400, name: '搜索引擎' }
            ]
          }
        ]

      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style>
/* tooltip ={                               //提示框组件
    trigger: 'item',                        //触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
    triggerOn:"mousemove",                  //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
    showContent:true,                       //是否显示提示框浮层
    alwaysShowContent:true,                 //是否永远显示提示框内容
    showDelay:0,                            //浮层显示的延迟，单位为 ms
    hideDelay:100,                          //浮层隐藏的延迟，单位为 ms
    enterable:false,                        //鼠标是否可进入提示框浮层中
    confine:false,                          //是否将 tooltip 框限制在图表的区域内
    transitionDuration:0.4,                 //提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动
    position:['50%', '50%'],                //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧，
    formatter:"{b0}: {c0}<br />{b1}: {c1}", //提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等
    backgroundColor:"transparent",          //标题背景色
    borderColor:"#ccc",                     //边框颜色
    borderWidth:0,                          //边框线宽
    padding:5,                              //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
    textStyle:mytextStyle,                  //文本样式
}; */

</style>
